<template>
  <div class="all">
    <div id="bbsMyDiv">
      <el-dropdown trigger="click"
                   style="float: right">
        <span class="el-dropdown-link">
          <el-button type="success">点我查看<i class="el-icon-caret-bottom el-icon--right" /></el-button>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="clearfix"><a @click="myArticleListFlag = true"> 我的帖子 </a>
          </el-dropdown-item>
          <el-dropdown-item class="clearfix">
            <a @click="myLoveFlag = true">我的收藏</a>
          </el-dropdown-item>
          <el-dropdown-item class="clearfix">
            <a @click="messageFlag = true">站内信</a>
            <el-badge class="mark"
                      :value="3" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <br style="clear: both">
    </div>
    <div id="boardDiv"
         class="boardDiv">
      <el-card shadow="always">
        <div class="cardHead">
          <strong class="boardTitle"> 智慧社区信息发布 </strong>
          <span>
            今日新帖 :
            <strong class="boardNumber">9</strong>
            <span class="pipe">|</span>
            总数 ：
            <strong class="boardNumber">109</strong>
          </span>
        </div>
        <div class="boardContent">
          请遵守《互联网电子公告服务管理规定》及中华人民共和国其他各项有关法律法规。<br>
          禁止发布违法帖子。<br>
          严禁发表危害国家安全、损害国家利益、破坏民族团结、破坏国家宗教政策、
          破坏社会稳定、侮辱、诽谤、教唆、淫秽等内容的评论 。<br>
          论坛管理员有权保留或删除评论内容<br>
        </div>
      </el-card>
    </div>
    <div class="searchAndPageDiv">
      <div class="handupDiv">
        <span class="btnSpan">
          <el-button class="handupBtn"
                     type="primary"
                     @click="toNewArticle">
            发帖 <i class="el-icon-document" />
          </el-button>
          <el-button class="handupBtn"
                     type="primary"
                     @click="checkFlag = true">
            举报审核 <i class="el-icon-s-check" />
          </el-button>
        </span>
        <span style="margin-left: 10px">
          <el-input v-model="searchWords"
                    placeholder="请输入内容"
                    class="input-with-select"
                    style="width: 420px">
            <el-select slot="prepend"
                       v-model="searchWordsType"
                       placeholder="请选择"
                       style="width: 120px">
              <el-option label="文章标题"
                         value="1" />
              <el-option label="发帖人名称"
                         value="2" />
            </el-select>
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="searchInInput" />
          </el-input>
        </span>
      </div>
      <div class="pageSpan">
        <!-- <el-pagination :current-page.sync="currentPage3"
                       :page-size="100"
                       layout="prev, pager, next, jumper"
                       :total="1000"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" /> -->
        <pagination v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="initList" />
      </div>
    </div>
    <br>
    <div class="dividerDiv">
      <el-divider />
    </div>
    <div id="themeDiv"
         class="themeDiv">
      <el-row>
        <el-button plain
                   @click="initList">全部</el-button>

        <el-dropdown v-for="(theme, index) in themeWords"
                     :id="index"
                     :key="theme"
                     split-button
                     class="el-dropdown"
                     @click="getListBystatus(index)">
          {{ theme }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(status, statusIndex) in themeStatus[index]"
                              :key="statusIndex"><a @click="getListBystatus(index, status)">{{ statusWords[status] }}</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button plain
                   style="margin-left: 10px"
                   @click="addFlag = true">
          添加栏目
          <i class="el-icon-plus" />
        </el-button>
      </el-row>
    </div>
    <div class="articleDiv">
      <div class="articleList">
        <table>
          <thead>
            <tr>
              <td colspan="1">
                <span>全部主题</span>
                <span>最新</span>
                <span>最热</span>
              </td>
              <td>作者</td>
              <td>回复/查看</td>
              <td>最后发表</td>
            </tr>
          </thead>
          <tbody v-for="items in allArticleList"
                 :key="items">
            <tr>
              <td>
                <!-- <span @click="getList(items.themeId)">[{{ items.theme }}]</span> -->
                <a href="javascript:;"
                   @click="getExListAndSetBtn(items.theme)">[{{ themeWords[items.theme] }}]</a>
                <!-- <a href="/articleDetail">{{ items.title }}</a> -->
                <a @click="toArticle(items.articleid)">{{ items.title }}</a>
                <!-- <router-link :to="{path:'/articleDetail',query:{id:items.articleid}}">{{ items.title }}</router-link> -->
                <span v-if="items.statusflag != 0 && items.statusflag != 1">{{
                  statusWords[items.statusflag]
                }}</span>
              </td>
              <td style="witdh=135px">
                <!-- <p>{{ returnNameById(items.authorid) }}</p>
                <p>{{ returnNameById(items.authorid) }}</p> -->
                <p>{{ items.nickName }}</p>
                <p>{{ items.createtime }}</p>
              </td>
              <td style="witdh=42px">
                <p>{{ items.commentnumber }}</p>
                <p>{{ items.viewnumber }}</p>
              </td>
              <td style="witdh=88px">
                <p>{{ items.replyName }}</p>
                <p>{{ items.replyTime }}</p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div v-if="showgotop"
         id="back"
         @click="gotop">
      <i class="el-icon-caret-top" />
    </div>
    <!-- 我的帖子 弹出窗 -->
    <div>
      <el-dialog class="myArticleList"
                 title="我的帖子"
                 :visible.sync="myArticleListFlag"
                 center>
        <el-table :data="myArticleList"
                  border
                  highlight-current-row
                  style="display=flex">
          <el-table-column align="center"
                           label="提交时间"
                           width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="帖子主题"
                           width="120px">
            <template slot-scope="{ row }">
              <span>{{ row.theme }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="文章标题"
                           style="min-width: 600px">
            <template slot-scope="{ row }">
              <a @click="toArticle">{{ row.title }}</a>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="myArticleListFlag = false">取 消</el-button>
          <el-button type="primary"
                     @click="myArticleListFlag = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 站内信 弹出框 -->
    <div>
      <el-dialog :visible.sync="messageFlag"
                 title="站内信"
                 center>
        <el-table :data="messages">
          <el-table-column prop="time"
                           label="时间"
                           width="160px" />
          <el-table-column prop="username"
                           label="发信人"
                           width="100px">
            <template slot-scope="scope">
              {{ scope.row.username }}
              <a href="#"
                 title="管理员">
                <i v-show="scope.row.username == 'admin'"
                   style="color: red"
                   class="el-icon-medal" />
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="message"
                           label="内容">
            <template slot-scope="scope">
              在您的 "<a id="ToArticle"
                 @click="toArticle">{{
                scope.row.title
              }}</a>" 中评论 {{ scope.row.message }}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer"
              class="dialog-footer"
              style="text-align: center">
          <el-button @click="messageFlag = false">取 消</el-button>
          <el-button type="primary"
                     @click="messageFlag = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 我的收藏 弹出框 -->
    <div>
      <el-dialog class="myArticleList"
                 title="我的收藏"
                 :visible.sync="myLoveFlag"
                 center>
        <el-table :data="myArticleList"
                  border
                  highlight-current-row
                  style="display=flex">
          <el-table-column align="center"
                           label="收藏时间"
                           width="180px">
            <template slot-scope="{ row }">
              <span>{{ row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="帖子主题"
                           width="120px">
            <template slot-scope="{ row }">
              <span>{{ row.theme }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="文章标题"
                           style="min-width: 600px">
            <template slot-scope="{ row }">
              <a @click="toArticle">{{ row.title }}</a>

            </template>
          </el-table-column>
        </el-table>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="myLoveFlag = false">取 消</el-button>
          <el-button type="primary"
                     @click="myLoveFlag = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 添加栏目 -->
    <el-dialog title="添加栏目"
               center
               :visible.sync="addFlag">
      <el-form :model="formForNewColumn">
        <el-form-item label="栏目名称:"
                      prop="columnName"
                      style="display: block">
          <el-input v-model="formForNewColumn.columnName"
                    width="100px" />
        </el-form-item>
        <div v-for="(item, index) in formForNewColumn.status"
             :key="item">
          <el-form-item label="帖子状态"
                        :prop="'status' + index + '.statusName'">
            <el-input v-model="formForNewColumn.status.statusName" />
            <el-button v-show="index > 0"
                       type="text"
                       icon="el-icon-delete"
                       @click="deleteStatus(item, index)">删除</el-button>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="text"
                     style="position: relative"
                     @click="addStatus"><i class="el-icon-circle-plus" />新增帖子状态</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 举报审核 -->
    <div>
      <el-dialog :visible.sync="checkFlag"
                 title="举报列表"
                 center>
        <el-table :data="checkList">
          <el-table-column prop="time"
                           label="时间"
                           width="160px" />
          <el-table-column prop="checkManName"
                           label="举报人">
            <template slot-scope="scope">
              {{ scope.row.checkManName
              }}<i v-show="scope.row.username == 'admin'"
                 style="color: red"
                 class="el-icon-medal" />
            </template>
          </el-table-column>
          <el-table-column prop="checkedManName"
                           label="被举报人" />
          <el-table-column prop="title"
                           label="标题">
            <template slot-scope="scope">
              <a class="checkMessage"
                 @click="toArticle(4)">
                测试
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="checkType"
                           label="举报类型" />
          <el-table-column prop="memo"
                           label="举报理由" />
        </el-table>
        <span slot="footer"
              class="dialog-footer"
              style="text-align: center">
          <el-button @click="checkFlag = false">取 消</el-button>
          <el-button type="primary"
                     @click="checkFlag = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 禁言提示框 -->
      <el-dialog title="提示"
                 :visible.sync="speakFlag"
                 width="30%"
                 center>
        <span>您的禁言结束时间为{{ speakTimeInDialog }}</span>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="speakFlag = false">取 消</el-button>
          <el-button type="primary"
                     @click="speakFlag= false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import { getList, getExList, getExListBystatus } from '@/api/bbs/article-list'
import communityNewsListVue from '../party/communityNewsList.vue'
import { getList } from '@/api/bbs/article'
import { isPunish } from '@/api/bbs/punish'
import { returnName } from '@/api/system/user'
import data from '../system/dict/data.vue'

export default {
  components: { data },
  data () {
    return {
      total: null,
      speakTimeInDialog: null,
      speakFlag: false, // 禁言dialog开启标志
      checkFlag: false, // 举报审核 dialog开启标志
      searchWords: '',
      searchWordsType: '',
      queryParamsInInput: {
        title: null,
        authorName: null
      },
      myArticleListFlag: false, // 我的帖子 dialog开启标志
      myLoveFlag: false, // 我的收藏 dialog开启标志
      addFlag: false, // 增加板块 dialog开启标志
      formForNewColumn: {
        columnName: '',
        status: [
          {
            statusName: ''
          }
        ]
      },
      myArticleList: [
        {
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        },
        {
          title: '交换',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        },
        {
          title: '交换',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        },
        {
          title: '交换',
          time: '2021-04-23 09:48:32',
          theme: '闲物置换'
        }
      ],
      messages: [
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: '学生1',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        },
        {
          time: '2021-04-31 09:48:32',
          username: 'admin',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          message: '我很喜欢，能让给我吗',
          url: ''
        }
      ],
      checkList: [
        {
          url: '',
          title: '阿尔法大蛋，智享版，正品全新没开封，转让了！！',
          checkManId: 1,
          checkManName: 'passby',
          checkedManId: 2,
          checkedManName: '爱吃苹果的猫',
          checkType: '其他违规信息',
          memo: '存在假货伪装成正品买的情况',
          time: '2021-05-31 19:17:32'
        }
      ],
      // ArticleList: null,
      // themeWords: [],
      // themeStatus: null,
      themeWords: ['邻里之间', '闲物置换', '家政服务', '建言献策'],
      statusWords: ['默认', '未置换', '已置换', '已过期'],
      themeStatus: [
        [0],
        [1, 2],
        [0, 3],
        [0]
      ],
      queryParams: {
        articleid: null,
        authorid: null,
        createtime: null,
        title: null,
        content: null,
        picurls: null,
        commentnumber: null,
        viewnumber: null,
        theme: null,
        statusflag: null,
        deleteflag: 0,
        communityid: null,
        pageNum: 1,
        pageSize: 10
      },
      tempName: null,
      allArticleList: [],
      showgotop: true,
      messageFlag: false
    }
  },
  computed: {},
  created () {
    this.initList()
  },
  mounted () {
    this.showGotop()
  },
  methods: {
    initList () {
      getList(this.queryParams).then(response => {
        this.allArticleList = response.rows
        this.total = response.total
      })
    },
    resetQuery () {
      this.queryParams.articleid = null
      this.queryParams.authorid = null
      this.queryParams.createtime = null
      this.queryParams.title = null
      this.queryParams.content = null
      this.queryParams.picurls = null
      this.queryParams.commentnumber = null
      this.queryParams.viewnumber = null
      this.queryParams.theme = null
      this.queryParams.statusflag = null
      this.queryParams.deleteflag = 0
      this.queryParams.communityid = null
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
    },
    addStatus () {
      this.formForNewColumn.status.push({
        statusName: ''
      })
    },
    deleteStatus (item, index) {
      this.index = this.formForNewColumn.status.indexOf(item)
      if (index !== -1) {
        this.formForNewColumn.status.splice(index, 1)
      }
    },
    gotop () {
      scrollTo(0, 200)
    },
    showGotop () {
      window.onscroll = function () {
        if (document.documentElement.scrollTop > 200) {
          this.showgotop = true
        } else {
          this.showgotop = false
        }
      }
    },
    toArticle (articleid) {
      const id = articleid
      console.log('________________________' + id)
      this.$router.push('/bbs/detail/' + id)
    },
    async toNewArticle () {
      // this.$router.push({ path: 'newArticle' })
      const currentTime = this.getTime()
      await isPunish().then(response => {
        this.speakTimeInDialog = response
        console.log(response)
      })
      console.log(this.speakTimeInDialog)
      if (this.speakTimeInDialog && currentTime < this.speakTimeInDialog) {
        this.speakFlag = true
      } else { this.$router.push({ path: 'newArticle' }) }
    },
    getListBystatus (index, status) {
      if (index != null) { this.queryParams.theme = index }
      if (status != null) { this.queryParams.statusflag = status }
      getList(this.queryParams).then(response => {
        this.allArticleList = response.rows
      })
      this.resetQuery()
    },
    async returnNameById (id) {
      await returnName(id).then(response => {
        this.tempName = response
      })
    },
    searchInInput () {
      if (this.searchWordsType == 1) {
        this.queryParamsInInput.title = this.searchWords
      }
      if (this.searchWordsType == 2) {
        this.queryParamsInInput.title = this.searchWords
      }
      getList(this.queryParamsInInput).then(response => {
        this.allArticleList = response.rows
      })
      this.queryParamsInInput.title = null
    }

  }
}
</script>

<style lang="scss" scoped>
.all {
  width: 80%;
  min-width: 900px;
  margin: 15px auto;
}
#bbsMyDiv {
  margin-right: 15px;
}
.boardDiv {
  margin: 15px 15px;
}
.boardTitle {
  margin-right: 50px;
}
.pipe {
  margin-right: 15px;
  margin-left: 15px;
  color: darkgrey;
}
.boardNumber {
  color: orangered;
  margin-left: 10px;
}
.boardContent {
  margin-top: 20px;
  letter-spacing: 1.5px;
}
.el-dropdown {
  margin: 0 5px;
}
.searchAndPageDiv {
  height: 30px;
  margin: 1px 1px;
}
.handupDiv {
  height: 30px;
  margin: 15px 15px;
  float: left;
}
.btnSpan {
  float: left;
}
.pageSpan {
  float: right;
}
.dividerDiv {
  height: 30px;
  margin: 15px 15px;
}
.articleDiv {
  margin: 15px 15px;
}
.articleList {
  border: 1px solid #ccc;
}
.articleList table {
  border-collapse: collapse;
  width: 100%;
  border-top: 1px solid #aaa;
  font-size: 14px;
  line-height: 1.5px;
}
.articleList table thead tr td {
  background-color: #eee;
  height: 45px;
}
.input-with-select {
  width: 600px;
  margin-right: 10px;
}
.articleList table thead tr td span {
  margin-left: 16px;
  color: #336699;
}
.articleList table tr td {
  border-bottom: 1px solid #aaa;
  height: 15px;
}
.articleList table tbody tr td a:first-child {
  //帖子前的类别
  color: (rgb(9, 152, 248));
  margin-right: 10px;
  margin-left: 16px;
  text-decoration: none;
}
.articleList table tbody tr td a:hover {
  text-decoration: underline;
}
.articleList table tbody tr td span:last-child {
  //帖子后的状态
  color: #cdcdcd;
  margin-right: 10px;
  margin-left: 16px;
}
.checkMessage {
  display: block;
  max-height: 150px;
}
.articleList table tr td p:last-child {
  color: #999;
}
.articleList table tbody tr {
  height: 20px;
  display: table-row;
}
.articleList table tbody tr td {
  height: 20px;
  display: table-cell;
}
.articleList table tbody tr:hover {
  background-color: #eee;
}
.themeDiv {
  width: 100%;
  height: 30px;
  margin: 15px 15px;
}
.themeSpan {
  text-align: center;
  float: right;
  display: block;
  background-color: #999999;
  color: rgb(255, 255, 255);
  width: 27px;
  border-radius: 3px;
  margin-left: 5px;
  font-size: 13px;
  height: 15px;
}
#back {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 70px;
  bottom: 70px;
  color: #1890ff;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
}
#back:hover {
  background-color: #f2f6fc;
}
#aToArticle:hover {
  text-decoration: underline;
}
.el-icon-caret-top {
  transform: translate(10px, 8px);
}
// .themeDiv botton:active {
//   border-c: 1px #1890ff;
//   color: #1890ff;
// }
</style>

